{% extends 'ux_packages/package.html.twig' %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'toggle-password',
        eyebrowText: 'Switch between password & text'
    } %}
        {% block title_header %}
            From password to text <em>&amp; vice versa</em>
        {% endblock %}

        {% block sub_content %}
            Upgrade your password field to toggle between text and password.
        {% endblock %}
    {% endcomponent %}
{% endblock %}

{% block code_block_left %}
    <twig:CodeBlock filename="src/Form/TogglePasswordForm.php" />
{% endblock %}

{% block code_block_right %}
    <twig:CodeBlock
            filename="templates/ux_packages/toggle_password.html.twig"
            targetTwigBlock="demo_content"
    />
{% endblock %}

{% block demo_title %}UX Toggle Password{% endblock %}

{% block demo_content %}
    {{ form_start(form) }}
    {{ form_row(form.email) }}
    {{ form_row(form.password) }}
    <button type="submit" class="btn btn-primary">Login</button>
    {{ form_end(form) }}
{% endblock %}
